<template>
    <div class="enterprise-management">
        <!-- 主内容区域 -->
        <div class="main-content">
            <div class="content-container">
                <!-- 选项卡导航 -->
                <div class="tabs-container">
                    <div class="tabs-nav">
                        <button v-for="tab in tabs" :key="tab.speciesId" class="tab-item"
                            :class="{ active: activeTab === tab.speciesId }" @click="switchTab(tab.speciesId)">
                            <div class="tab-icon">
                                <component :is="getTabIcon(tab.icon)" />
                            </div>
                            <span class="tab-label">{{ tab.taxonomicClass }}</span>
                        </button>
                    </div>
                    <div class="tab-indicator" :style="{ transform: `translateX(${activeTabIndex * 100}%)` }"></div>
                </div>

                <!-- 选项卡内容 -->
                <div class="tab-content">
                    <div class="tab-panel">
                        <!-- <div class="panel-header">
                            <h2>企业1</h2>
                            <div class="header-divider"></div>
                        </div> -->
                        <div class="modules-grid">
                            <div v-for="module in environmentalModules" :key="module.id" class="module-card">
                                <div class="card-content">
                                    <div class="card-left">
                                        <h3 class="module-title">{{ module.scientificName }}</h3>
                                        <p class="module-subtitle">{{ module.distributionArea }}</p>
                                        <button class="detail-btn" @click="viewDetails(module)">
                                            查看详情
                                        </button>
                                    </div>
                                    <div class="card-right">
                                        <div class="qr-code">
                                            <!-- <canvas :ref="el => setQRRef(el, module.id)" width="120" height="120"
                                                class="qr-canvas"></canvas> -->
                                            <a-image-preview-group infinite>
                                                <a-image :src='module.imgs' class="image" width="120px" height="120px"
                                                    style="cursor: pointer;">

                                                </a-image>
                                            </a-image-preview-group>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- <div v-else-if="activeTab === 'monitoring'" class="tab-panel">
                        <div class="panel-header">
                            <h2>实时监测数据</h2>
                            <div class="header-divider"></div>
                        </div>
                        <div class="monitoring-content">
                            <div class="status-indicators">
                                <div class="status-item">
                                    <div class="status-dot online"></div>
                                    <span>在线监测点: 12</span>
                                </div>
                                <div class="status-item">
                                    <div class="status-dot offline"></div>
                                    <span>离线监测点: 2</span>
                                </div>
                            </div>

                            <div class="monitoring-grid">
                                <div class="monitoring-card">
                                    <h4>废水排放</h4>
                                    <div class="metric-value">
                                        <span class="value">15.2</span>
                                        <span class="unit">mg/L</span>
                                    </div>
                                    <div class="metric-status normal">正常</div>
                                </div>

                                <div class="monitoring-card">
                                    <h4>废气排放</h4>
                                    <div class="metric-value">
                                        <span class="value">8.7</span>
                                        <span class="unit">mg/m³</span>
                                    </div>
                                    <div class="metric-status normal">正常</div>
                                </div>

                                <div class="monitoring-card">
                                    <h4>噪声监测</h4>
                                    <div class="metric-value">
                                        <span class="value">45.3</span>
                                        <span class="unit">dB</span>
                                    </div>
                                    <div class="metric-status normal">正常</div>
                                </div>

                                <div class="monitoring-card">
                                    <h4>固废处理</h4>
                                    <div class="metric-value">
                                        <span class="value">98.5</span>
                                        <span class="unit">%</span>
                                    </div>
                                    <div class="metric-status normal">正常</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-else-if="activeTab === 'reports'" class="tab-panel">
                        <div class="panel-header">
                            <h2>环境报告</h2>
                            <div class="header-divider"></div>
                        </div>
                        <div class="reports-content">
                            <div class="reports-header">
                                <button class="generate-btn">生成报告</button>
                            </div>

                            <div class="reports-list">
                                <div class="report-item">
                                    <div class="report-info">
                                        <h4>2024年第一季度环境监测报告</h4>
                                        <p>生成时间: 2024-03-31 14:30:25</p>
                                    </div>
                                    <div class="report-actions">
                                        <button class="action-btn view">查看</button>
                                        <button class="action-btn download">下载</button>
                                    </div>
                                </div>

                                <div class="report-item">
                                    <div class="report-info">
                                        <h4>污染防治设施运行报告</h4>
                                        <p>生成时间: 2024-03-28 09:15:42</p>
                                    </div>
                                    <div class="report-actions">
                                        <button class="action-btn view">查看</button>
                                        <button class="action-btn download">下载</button>
                                    </div>
                                </div>

                                <div class="report-item">
                                    <div class="report-info">
                                        <h4>危废处置情况报告</h4>
                                        <p>生成时间: 2024-03-25 16:45:18</p>
                                    </div>
                                    <div class="report-actions">
                                        <button class="action-btn view">查看</button>
                                        <button class="action-btn download">下载</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-else-if="activeTab === 'settings'" class="tab-panel">
                        <div class="panel-header">
                            <h2>企业设置</h2>
                            <div class="header-divider"></div>
                        </div>
                        <div class="settings-content">
                            <div class="settings-form">
                                <div class="form-group">
                                    <label>企业名称</label>
                                    <input type="text" value="企业1" class="form-input" />
                                </div>

                                <div class="form-group">
                                    <label>企业编码</label>
                                    <input type="text" value="ENT0001" class="form-input" />
                                </div>

                                <div class="form-group">
                                    <label>所属行业</label>
                                    <select class="form-select">
                                        <option value="制造业">制造业</option>
                                        <option value="化工">化工</option>
                                        <option value="电力">电力</option>
                                        <option value="钢铁">钢铁</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>所在地区</label>
                                    <input type="text" value="上海市" class="form-input" />
                                </div>

                                <div class="form-actions">
                                    <button class="save-btn">保存设置</button>
                                    <button class="reset-btn">重置</button>
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, h } from 'vue'
import { getswBioList } from "@/api/modules/swBio/index";
import { getswSurveyList } from "@/api/modules/swSurvey/index";
// import { IconEye } from '@arco-design/web-vue/es/icon';


// const visible1 = ref(false)
// 类型定义
interface EnvironmentalModule {
    id: number
    title: string
    subtitle: string
    qrData: string
}

interface Tab {
    id: string
    label: string
    icon: string
}

// 选项卡图标组件
const OverviewIcon = () => h('svg', {
    width: '20',
    height: '20',
    viewBox: '0 0 24 24',
    fill: 'currentColor'
}, [
    h('path', { d: 'M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z' })
])

const MonitoringIcon = () => h('svg', {
    width: '20',
    height: '20',
    viewBox: '0 0 24 24',
    fill: 'currentColor'
}, [
    h('path', { d: 'M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z' })
])

const ReportsIcon = () => h('svg', {
    width: '20',
    height: '20',
    viewBox: '0 0 24 24',
    fill: 'currentColor'
}, [
    h('path', { d: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z' }),
    h('polyline', { points: '14,2 14,8 20,8' })
])

const SettingsIcon = () => h('svg', {
    width: '20',
    height: '20',
    viewBox: '0 0 24 24',
    fill: 'currentColor'
}, [
    h('path', { d: 'M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.82,11.69,4.82,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z' })
])

// 响应式数据
const activeTab = ref('overview')

// 选项卡配置
const tabs = ref([
    // { id: 'overview', label: '概览', icon: 'OverviewIcon' },
    // { id: 'monitoring', label: '监测', icon: 'MonitoringIcon' },
    // { id: 'reports', label: '报告', icon: 'ReportsIcon' },
    // { id: 'settings', label: '设置', icon: 'SettingsIcon' }
]) as any

// 环境监管模块数据
const environmentalModules = ref([
    // {
    //     id: 1,
    //     title: '入河排污口',
    //     subtitle: '入河排污口',
    //     qrData: 'discharge-outlet'
    // },
    // {
    //     id: 2,
    //     title: '污染防治设施',
    //     subtitle: '污染防治设施',
    //     qrData: 'pollution-control'
    // },
    // {
    //     id: 3,
    //     title: '环境影响评价',
    //     subtitle: '环境影响评价',
    //     qrData: 'environmental-impact'
    // },
    // {
    //     id: 4,
    //     title: '危废贮存点',
    //     subtitle: '危废贮存点',
    //     qrData: 'hazardous-waste'
    // },
    // {
    //     id: 5,
    //     title: '排污许可',
    //     subtitle: '排污许可',
    //     qrData: 'discharge-permit'
    // },
    // {
    //     id: 6,
    //     title: '自行监测',
    //     subtitle: '自行监测',
    //     qrData: 'self-monitoring'
    // }
]) as any

// 计算属性
const activeTabIndex = computed(() => {
    return tabs.value.findIndex((tab: any) => tab.id === activeTab.value)
})

// 方法
const switchTab = (tabId: string) => {
    console.log('切换到选项卡:', tabId)
    activeTab.value = tabId
    getDataBySpecId()
}

const getTabIcon = (iconName: string) => {
    switch (iconName) {
        case 'OverviewIcon':
            return OverviewIcon
        case 'MonitoringIcon':
            return MonitoringIcon
        case 'ReportsIcon':
            return ReportsIcon
        case 'SettingsIcon':
            return SettingsIcon
        default:
            return MonitoringIcon
    }
}

const viewDetails = (module: EnvironmentalModule) => {
    console.log('查看详情:', module.title)
}

// 简单的二维码生成函数
const generateQRCode = (canvas: HTMLCanvasElement, data: string) => {
    const ctx = canvas.getContext('2d')
    if (!ctx) return

    // 清空画布
    ctx.fillStyle = '#ffffff'
    ctx.fillRect(0, 0, 120, 120)

    // 生成简单的二维码模式
    ctx.fillStyle = '#000000'
    const size = 120
    const moduleSize = size / 25

    // 生成伪随机模式（基于数据内容）
    let seed = 0
    for (let i = 0; i < data.length; i++) {
        seed += data.charCodeAt(i)
    }

    const random = (seed: number) => {
        const x = Math.sin(seed) * 10000
        return x - Math.floor(x)
    }

    for (let row = 0; row < 25; row++) {
        for (let col = 0; col < 25; col++) {
            const seedValue = seed + row * 25 + col
            if (random(seedValue) > 0.5) {
                ctx.fillRect(col * moduleSize, row * moduleSize, moduleSize, moduleSize)
            }
        }
    }

    // 添加定位标记（三个角）
    const drawPositionMarker = (x: number, y: number) => {
        ctx.fillStyle = '#000000'
        ctx.fillRect(x, y, moduleSize * 7, moduleSize * 7)
        ctx.fillStyle = '#ffffff'
        ctx.fillRect(x + moduleSize, y + moduleSize, moduleSize * 5, moduleSize * 5)
        ctx.fillStyle = '#000000'
        ctx.fillRect(x + moduleSize * 2, y + moduleSize * 2, moduleSize * 3, moduleSize * 3)
    }

    drawPositionMarker(0, 0) // 左上
    drawPositionMarker(18 * moduleSize, 0) // 右上
    drawPositionMarker(0, 18 * moduleSize) // 左下
}

const generateQRCodes = () => {
    environmentalModules.value.forEach(module => {
        const canvas = document.querySelector(`[data-ref="qr-${module.id}"]`) as HTMLCanvasElement
        if (canvas) {
            const qrData = `企业1-${module.qrData}`
            generateQRCode(canvas, qrData)
        }
    })
}

// 修复ref模板引用
const setQRRef = (el: HTMLCanvasElement | null, moduleId: number) => {
    if (el) {
        el.setAttribute('data-ref', `qr-${moduleId}`)
    }
}

// 生命周期
onMounted(() => {
    initTabsData()
})

async function initTabsData() {
    let obj = {
        "swBioDtoFilter": {},
        "orderParam": null,
        "pageParam": {
            "pageNum": 1,
            "pageSize": 9999,
            "count": true
        }
    }
    let res = await getswBioList(obj) as any
    tabs.value = res.data.dataList
    activeTab.value = tabs.value[0].speciesId
    getDataBySpecId()
}

async function getDataBySpecId() {
    let obj = {
        "swSurveyDtoFilter": {
            "speciesId": activeTab.value
        },
        "orderParam": null,
        "pageParam": {
            "pageNum": 1,
            "pageSize": 999,
            "count": true
        }
    }
    let res = await getswSurveyList(obj) as any
    environmentalModules.value = res.data.dataList
}


function imgShow(imageUrl: any) {
    const image = new Image()
    image.src = imageUrl
    image.onload = () => {
        //创建弹出层
        const previewContatiner = document.createElement('div') as any
        previewContatiner.style.position = 'fixed'
        previewContatiner.style.top = 0
        previewContatiner.style.bottom = 0
        previewContatiner.style.left = 0
        previewContatiner.style.right = 0
        previewContatiner.style.zIndex = 9999
        previewContatiner.style.backgroundColor = 'rgba(0,0,0,0.8)'
        previewContatiner.style.display = 'flex'
        previewContatiner.style.justifyContent = 'center'
        previewContatiner.style.alignItems = 'center'
        document.body.appendChild(previewContatiner)
        //在弹出层增加图片
        const previewImage = document.createElement('img') as any
        previewImage.src = imageUrl
        previewImage.style.maxWidth = '80%'
        previewImage.style.maxHeight = '80%'
        previewImage.style.zIndex = 9999
        previewContatiner.appendChild(previewImage)
        //点击弹出层，关闭预览
        previewContatiner.addEventListener('click', () => {
            document.body.removeChild(previewContatiner)
        })
    }
    image.onerror = function () {
        console.log('图片加载失败')
    }
}
</script>

<style scoped>
::v-deep .arco-image-with-footer-inner .arco-image-footer {
    justify-content: center !important;
    line-height: 100px !important;
}

.enterprise-management {
    display: flex;
    height: 100vh;
    background: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 主内容区域 */
.main-content {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    background: #f5f7fa;
}

.content-container {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 选项卡样式 */
.tabs-container {
    background: white;
    border-bottom: 1px solid #e8eaed;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tabs-nav {
    display: flex;
    padding: 0 32px;
    position: relative;
}

.tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #5f6368;
    transition: all 0.2s;
    position: relative;
    border-bottom: 3px solid transparent;
}

.tab-item:hover {
    color: #4285f4;
    background: rgba(66, 133, 244, 0.04);
}

.tab-item.active {
    color: #4285f4;
    border-bottom-color: #4285f4;
}

.tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-label {
    white-space: nowrap;
}

.tab-indicator {
    position: absolute;
    bottom: 0;
    left: 32px;
    height: 3px;
    /* background: #4285f4; */
    width: calc(25% - 8px);
    transition: transform 0.3s ease;
    border-radius: 2px 2px 0 0;
}

/* 选项卡内容 */
.tab-content {
    flex: 1;
    overflow-y: auto;
}

.tab-panel {
    padding: 32px;
    animation: fadeIn 0.3s ease;
    max-width: 1200px;
    margin: 0 auto;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 面板标题 */
.panel-header {
    margin-bottom: 32px;
}

.panel-header h2 {
    font-size: 28px;
    font-weight: 600;
    color: #202124;
    margin: 0 0 16px 0;
}

.header-divider {
    height: 3px;
    background: linear-gradient(90deg, #4285f4, #34a853);
    border-radius: 2px;
    width: 60px;
}

/* 概览面板 - 模块网格 */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
    gap: 24px;
}

.module-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    border: 1px solid #e8eaed;
    width: 320px;
    min-height: 150px;
}

.module-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-left {
    flex: 1;
}

.module-title {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    margin: 0 0 8px 0;
}

.module-subtitle {
    font-size: 14px;
    color: #5f6368;
    margin: 0 0 20px 0;
    min-height: 100px;
}

.detail-btn {
    background: #4285f4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    bottom: 20px;
    /* transition: all 0.2s; */
}

.detail-btn:hover {
    background: #3367d6;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
}

.card-right {
    margin-left: 24px;
}

.qr-code {
    width: 120px;
    height: 120px;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.qr-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* 监测面板 */
.monitoring-content {
    max-width: 1000px;
}

.status-indicators {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    justify-content: center;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #5f6368;
    background: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.online {
    background: #34a853;
    box-shadow: 0 0 0 2px rgba(52, 168, 83, 0.2);
}

.status-dot.offline {
    background: #ea4335;
    box-shadow: 0 0 0 2px rgba(234, 67, 53, 0.2);
}

.monitoring-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.monitoring-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eaed;
    text-align: center;
}

.monitoring-card h4 {
    font-size: 16px;
    font-weight: 500;
    color: #5f6368;
    margin: 0 0 16px 0;
}

.metric-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
}

.value {
    font-size: 32px;
    font-weight: 600;
    color: #202124;
}

.unit {
    font-size: 14px;
    color: #5f6368;
}

.metric-status {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.metric-status.normal {
    background: rgba(52, 168, 83, 0.1);
    color: #34a853;
}

/* 报告面板 */
.reports-content {
    max-width: 800px;
}

.reports-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 32px;
}

.generate-btn {
    background: #34a853;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.generate-btn:hover {
    background: #2d8f47;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(52, 168, 83, 0.3);
}

.reports-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.report-item {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eaed;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.report-info h4 {
    font-size: 16px;
    font-weight: 500;
    color: #202124;
    margin: 0 0 8px 0;
}

.report-info p {
    font-size: 14px;
    color: #5f6368;
    margin: 0;
}

.report-actions {
    display: flex;
    gap: 12px;
}

.action-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #dadce0;
}

.action-btn.view {
    background: #4285f4;
    color: white;
    border-color: #4285f4;
}

.action-btn.view:hover {
    background: #3367d6;
}

.action-btn.download {
    background: white;
    color: #5f6368;
}

.action-btn.download:hover {
    background: #f8f9fa;
    border-color: #4285f4;
    color: #4285f4;
}

/* 设置面板 */
.settings-content {
    max-width: 600px;
}

.settings-form {
    background: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8eaed;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #202124;
    margin-bottom: 8px;
}

.form-input,
.form-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    background: white;
}

.form-input:focus,
.form-select:focus {
    border-color: #4285f4;
    box-shadow: 0 1px 6px rgba(66, 133, 244, 0.2);
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.save-btn {
    background: #4285f4;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.save-btn:hover {
    background: #3367d6;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
}

.reset-btn {
    background: white;
    color: #5f6368;
    border: 1px solid #dadce0;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.reset-btn:hover {
    background: #f8f9fa;
    border-color: #4285f4;
    color: #4285f4;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .modules-grid {
        grid-template-columns: 1fr;
    }

    .tabs-nav {
        padding: 0 16px;
    }

    .tab-indicator {
        left: 16px;
    }
}

@media (max-width: 768px) {
    .tab-panel {
        padding: 16px;
    }

    .module-card {
        padding: 16px;
    }

    .card-content {
        flex-direction: column;
        text-align: center;
    }

    .card-right {
        margin-left: 0;
        margin-top: 16px;
    }

    .tabs-nav {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .monitoring-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .report-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .report-actions {
        align-self: stretch;
        justify-content: flex-end;
    }

    .status-indicators {
        flex-direction: column;
        align-items: center;
    }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
</style>